{% extends "base.html" %}

{% block title %}登录 - 大麦抢票助手{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-6 col-lg-4">
        <div class="card">
            <div class="card-header text-center">
                <h4 class="mb-0">账号登录</h4>
            </div>
            <div class="card-body">
                <form id="loginForm">
                    <div class="mb-3">
                        <label for="username" class="form-label">用户名/手机号</label>
                        <input type="text" class="form-control" id="username" required>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">密码</label>
                        <input type="password" class="form-control" id="password" required>
                    </div>
                    <div class="mb-3">
                        <label for="captcha" class="form-label">验证码</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="captcha" placeholder="请输入验证码">
                            <button class="btn btn-outline-secondary" type="button" id="refreshCaptcha">
                                <i class="fas fa-sync-alt"></i>
                            </button>
                        </div>
                        <div id="captchaImage" class="mt-2">
                            <img src="/api/auth/captcha" alt="验证码" class="img-fluid">
                        </div>
                    </div>
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="rememberMe">
                        <label class="form-check-label" for="rememberMe">记住登录状态</label>
                    </div>
                    <button type="submit" class="btn btn-primary w-100" id="loginBtn">
                        <i class="fas fa-sign-in-alt me-2"></i>登录
                    </button>
                </form>
            </div>
        </div>

        <div class="card mt-3">
            <div class="card-body">
                <h6 class="card-title">已保存账号</h6>
                <div id="savedAccounts">
                    <p class="text-muted mb-0">暂无保存的账号</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 登录状态模态框 -->
<div class="modal fade" id="loginModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">登录状态</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="loginStatus">
                    <div class="text-center">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">登录中...</span>
                        </div>
                        <p class="mt-2 mb-0">正在登录大麦网...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.getElementById('loginForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;
    const captcha = document.getElementById('captcha').value;
    const rememberMe = document.getElementById('rememberMe').checked;
    
    const loginBtn = document.getElementById('loginBtn');
    loginBtn.disabled = true;
    loginBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>登录中...';
    
    const modal = new bootstrap.Modal(document.getElementById('loginModal'));
    modal.show();
    
    try {
        const response = await axios.post('/api/auth/login', {
            username,
            password,
            captcha,
            rememberMe
        });
        
        const statusDiv = document.getElementById('loginStatus');
        if (response.data.success) {
            statusDiv.innerHTML = `
                <div class="alert alert-success">
                    <i class="fas fa-check-circle me-2"></i>
                    登录成功！正在跳转...
                </div>
            `;
            setTimeout(() => {
                window.location.href = '/ticket';
            }, 1500);
        } else {
            statusDiv.innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    登录失败：${response.data.message}
                </div>
            `;
            loginBtn.disabled = false;
            loginBtn.innerHTML = '<i class="fas fa-sign-in-alt me-2"></i>登录';
        }
    } catch (error) {
        console.error('登录错误:', error);
        document.getElementById('loginStatus').innerHTML = `
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-circle me-2"></i>
                登录请求失败，请重试
            </div>
        `;
        loginBtn.disabled = false;
        loginBtn.innerHTML = '<i class="fas fa-sign-in-alt me-2"></i>登录';
    }
});

// 刷新验证码
document.getElementById('refreshCaptcha').addEventListener('click', () => {
    const captchaImg = document.querySelector('#captchaImage img');
    captchaImg.src = '/api/auth/captcha?' + Date.now();
});
</script>
{% endblock %}